
<!--
 * @Description: 配置租户产品 - 配置服务弹出框
 * @Author: 马山
 * @Date: 2020-03-30 15:36:26
 * @LastEditTime: 2020-03-30 12:43:55
 * @LastEditors: 马山
 -->

<template>

<el-dialog title="订单详情" :close-on-click-modal="false" :visible="isShow" append-to-body class="serviceConfigDialog" @close="closeDialog" :width="'400px'">

    <div class="serviceConfigContent">
        <el-form ref="modifyForm" v-model="currentRowData" label-position="left" label-width="110px" size="mini" >
            
            <el-form-item label="服务名称：" >
                <el-input v-model="currentRowData.serviceName" clearable disabled></el-input>
            </el-form-item>
            <!-- <el-form-item label="启用时间：" class="">
                <el-date-picker size="mini" 
                v-model="currentRowData.beginDate" 
                format="yyyy-MM-dd HH-mm" 
                value-format="timestamp" 
                type="datetime" clearable>
                </el-date-picker>
            </el-form-item> -->
        </el-form>
        <!-- 根据类型来显示内容 -->
        <div >
            <span>配置内容</span>
            <el-divider></el-divider>

            <el-form style="height:180px;overflow-y:auto;" ref="modifyForm" v-model="configData" label-position="left" label-width="110px" size="mini" >
                <!-- :label="item.name+'：' " -->
                <el-form-item v-for=" item in configData"  :key="item.name"  class="">
                    <label slot="label" :title="item.name">
                        {{ item.name }}
                        <!-- <el-tooltip  class="" effect="dark" 
                            :content="item.name+'：'" placement="right">
                        </el-tooltip> -->
                    </label>
                    
                    <!-- 普通文本类型 -->
                    <div v-if="item.type=='1' ">
                        <el-input sizi="mini" type="text" v-model="item.value" clearable ></el-input>
                    </div>
                    <!-- 时间类型 -->
                    <div v-else-if="item.type=='2' ">
                        <el-date-picker size="mini" v-model="item.value" 
                        format="yyyy-MM-dd HH-mm" value-format="timestamp" type="datetime" clearable>
                        </el-date-picker>
                    </div>
                    <!-- 单选类型 -->
                    <div v-else-if="item.type=='3' ">
                        <div v-if="item.enumKeyValue">
                            <div class="radio-item" v-for=" cell in item.enumKeyValue" :key="cell.key">
                                <el-radio v-model="item.value" :label="cell.label">{{ cell.text }}</el-radio>
                            </div>
                            <!-- <el-radio v-model="item.value" :label="item.enumKeyValue[0].label">{{ item.enumKeyValue[0].text }}</el-radio> 
                            <el-radio v-model="item.value" :label="item.enumKeyValue[1].label">{{ item.enumKeyValue[1].text }}</el-radio> -->
                        </div>
                    </div>
                    
                </el-form-item>

            </el-form>

        </div>
    </div>  

    <div slot="footer" class="dialog-footer">
        <button class="el-button el-button--primary" @click="submit">确 定</button>
        <button class="el-button el-button--info" @click="closeDialog">取 消</button>
    </div>
</el-dialog>
    
</template>

<script>
export default {

name:"serviceConfig-dialog",
components:{},
props:{},
data:() =>({
    isShow:false,

    currentRowData:{},

    configData:[
        // {
        //     name:"",
        //     type:"",
        //     value:"", //单选类型
        // }
    ]
}),
mounted(){},
methods:{

    //组件入口
    open(data){
        this.isShow = true;
        // let configParams = Object.assign({},data);
        this.currentRowData = JSON.parse(JSON.stringify(data.row));
        this.currentRowData.currentIndex = data.index;
        this.currentRowData.isProduct = data.isProduct;
        this.getData();
    },


    getData(){
        if(this.currentRowData.configData){
            this.configData = this.currentRowData.configData;
        }else{
            this.api.getConfigTenant({
                // dependId:this.currentRowData.dependId,
                orderProductId:this.currentRowData.orderProductId
            }).then( res =>{
                console.log(res);
                // [{
                //     "id":"22555555",
                //     "name":"谷歌定位服务", //服务配置参数名称
                //     "type":3,  //1：普通输入类型；2：时间格式类型；3：下拉枚举类型
                //     "code":"code12345",
                //     "enumContent":"启用=1;禁用=0",
                //     "productId":"656445445544",
                //     "value":"1",
                //     "binded":0,
                //     "enumKeyValue":{
                //         "启用":1,
                //         "禁用":0
                //     }
                // }]
                let listData = res.data;
                let array = [];
                listData.forEach( item =>{
                    let obj = {
                        id:item.id,
                        name:item.name,
                        type:item.type,
                        value:item.value,
                        code:item.code
                    }
                    if(item.enumKeyValue){ //转换值
                        let newArray = [];
                        Object.entries(item.enumKeyValue).forEach( item =>{
                            let obj = {
                                text:item[0],
                                label:item[1]
                            }
                            newArray.push(obj);
                        });
                        item.enumKeyValue = newArray;
                        obj.enumKeyValue = item.enumKeyValue;
                    }
                    array.push(obj);
                });
                this.configData = array;

            }).catch( err =>{
                console.log(err);

            });
        }
        


    },


    submit(){
        
        let data = {
            currentIndex:this.currentRowData.currentIndex,
            configData:this.configData,
            isProduct:this.currentRowData.isProduct
        }
        this.$emit("submit",data);
        this.closeDialog();
    },

    closeDialog(){
        this.isShow = false;
    },



}



}
</script>

<style lang="scss">

.serviceConfigContent{

    .el-input{
        width: 180px!important;
    }
    .el-divider--horizontal{
        margin: 10px 0;
    }
    .el-form-item__label{
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .el-form-item{
        margin-bottom:5px!important;
        &.bottom0{
            margin-bottom:5px;  
        }
    }
    .radio-item{
        display: inline-block;
        margin-left: 10px;
    }
}


</style>


